<template>
  <div class="dashboard-editor-container">
    <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeTab">
      <el-tab-pane label="节能规则策略" name="tab1">
        <el-row>
          <div class="top">
            <el-button type="primary" style="float:right;margin-bottom: 10px;" @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="top">
            <p class="title">节能策略信息</p>
          </div>
          <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item label="规则名称">{{ EnergyForm.RuleName }}</el-descriptions-item>
            <el-descriptions-item label="资产名称">{{ Moder.DeviceName }}</el-descriptions-item>
            <el-descriptions-item label="规则生效">
              <span style="color:#67C23A" v-if="EnergyForm.IsValid === 1" type="success">生效</span>
              <span style="color:#F56C6C" v-else type="danger">停用</span>
            </el-descriptions-item>
            <el-descriptions-item label="检测间隔(秒)">{{ EnergyForm.Interval === 0 ? '不限制' : EnergyForm.Interval
            }}</el-descriptions-item>
            <el-descriptions-item label="关闭显示器(分)">{{ EnergyForm.AutoCloseMonitor === 0 ? '不限制' :
              EnergyForm.AutoCloseMonitor }}</el-descriptions-item>
            <el-descriptions-item label="指定亮度">{{ EnergyForm.Lighter === 0 ? '不限制' : EnergyForm.Lighter
            }}</el-descriptions-item>
            <el-descriptions-item label="停止硬盘(分)">{{ EnergyForm.AutoCloseDisk === 0 ? '不限制' : EnergyForm.AutoCloseDisk
            }}</el-descriptions-item>
            <el-descriptions-item label="在此时间后睡眠">{{ EnergyForm.AutoStandby === 0 ? '不限制' : EnergyForm.AutoStandby
            }}</el-descriptions-item>
            <el-descriptions-item label="自动关机时间点">{{ EnergyForm.AutoPowerOff == '' ? '不限制' : EnergyForm.AutoPowerOff
            }}</el-descriptions-item>
            <el-descriptions-item label="备注信息">{{ EnergyForm.Descp }}</el-descriptions-item>
          </el-descriptions>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="网络业务策略">
        <div class="top">
          <el-button type="primary" style="position: absolute; right: 15px; top: 15px;"
            @click="$router.go(-1)">返回</el-button>
        </div>
        <el-table stripe border :data="NetTableData" class="draggable-table" row-key="RuleName"
          style="width: 100%; margin-top: 47px">
          <el-table-column label="序号" width="60" type="index"
            :index='(index) => { return (index + 1) + (this.pageNum_net - 1) * this.pageSize_net }'> </el-table-column>
          <el-table-column label="业务名称" prop="RuleName" width="160px" show-overflow-tooltip></el-table-column>
          <el-table-column label="协议定义" show-overflow-tooltip prop="Protocol" width="160px"></el-table-column>
          <el-table-column label="网络地址" show-overflow-tooltip prop="ServerIP"></el-table-column>
          <el-table-column label="网络端口" show-overflow-tooltip prop="Port" width="160px"> </el-table-column>
          <el-table-column label="应用对象" show-overflow-tooltip prop="DeviceObj" width="160px">
            <template slot-scope="{row}">
              <span>{{ row.DeviceObj.length === 0 ? '全部' : row.DeviceObj.join(',') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检测间隔" show-overflow-tooltip prop="Interval" width="160px"></el-table-column>
          <el-table-column label="检测到异常产生事件告警" show-overflow-tooltip prop="CreateEvent" width="180px">
            <template slot-scope="{row}">
              <span style="color:#67C23A" v-if="row.CreateEvent === 1" type="success">生效</span>
              <span style="color:#F56C6C" v-else type="danger">停用</span>
            </template>
          </el-table-column>
          <el-table-column label="备注信息" show-overflow-tooltip prop="Descp"></el-table-column>
          <!-- <el-table-column label="操作"  width="150px">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="changeClick(scope.row, scope.$index)">修改</el-button>
                  <el-button size="mini" type="danger" @click="deleteClick(scope.row)">删除</el-button>
                </template>
              </el-table-column> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="基线核查策略">
        <el-row>
          <div class="top">
            <el-button type="primary" style="float:right;margin-bottom: 10px;" @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="top">
            <p class="title">基线策略信息</p>
          </div>
          <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item label="规则名称">{{ BaselineForm.RuleName }}</el-descriptions-item>
            <el-descriptions-item label="资产名称">{{ Moder.DeviceName }}</el-descriptions-item>
            <el-descriptions-item label="规则生效">
              <span style="color:#67C23A" v-if="BaselineForm.IsValid === 1" type="success">生效</span>
              <span style="color:#F56C6C" v-else type="danger">停用</span>
            </el-descriptions-item>
            <el-descriptions-item label="执行方案">{{ BaselineForm.ExecuteMode == 1 ? '立即执行' : '用户决策'
            }}</el-descriptions-item>
            <el-descriptions-item label="执行频率">{{ BaselineForm.CheckType == 1 ? '每周' + daysOfWeek(BaselineForm.DayWeek) :
              '每天' }}</el-descriptions-item>
            <el-descriptions-item label="执行时间">{{ BaselineForm.time }}</el-descriptions-item>
            <el-descriptions-item label="核查项目数量">{{ BaselineForm.checkitem[0] == 0 ? baselineTable.length :
              BaselineForm.checkitem.length }}</el-descriptions-item>
            <el-descriptions-item label="备注信息">{{ BaselineForm.Descp }}</el-descriptions-item>
          </el-descriptions>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="端口策略" lazy>
        <div class="top">
          <el-button type="primary" style="position: absolute; right: 15px; top: 15px;"
            @click="$router.go(-1)">返回</el-button>
        </div>
        <el-table stripe border :data="illTableData" class="draggable-table" row-key="RuleName"
          style="width: 100%; margin-top: 47px">
          <el-table-column label="序号" width="60" type="index"
            :index='(index) => { return (index + 1) + (this.pageNum_ill - 1) * this.pageSize_ill }'> </el-table-column>
          <el-table-column label="规则名称" prop="RuleName" show-overflow-tooltip width="160px"></el-table-column>
          <el-table-column label="应用对象" show-overflow-tooltip prop="DeviceObj" width="160px">
            <template slot-scope="{row}">
              <span v-if="row.DeviceObj == ''">全部</span>
              <span v-if="Array.isArray(row.DeviceObj)">{{ row.DeviceObj.join(',') }}</span>
              <span v-else>{{ row.DeviceObj }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规则生效" show-overflow-tooltip prop="IsValid" width="160px">
            <template slot-scope="{row}">
              <span style="color:#67C23A" v-if="row.IsValid === 1" type="success">生效</span>
              <span style="color:#F56C6C" v-else type="danger">停用</span>
            </template>
          </el-table-column>
          <el-table-column label="检测模式" show-overflow-tooltip prop="CheckType" width="160px">
            <template slot-scope="{row}">
              <span style="color:#67C23A" v-if="row.CheckType === 1" type="success">白名单</span>
              <span style="color:#F56C6C" v-else type="danger">黑名单</span>
            </template>
          </el-table-column>
          <el-table-column label="检测间隔" show-overflow-tooltip prop="Interval" width="160px"></el-table-column>
          <el-table-column label="扫描端口" show-overflow-tooltip prop="Port">
            <template slot-scope="scope">
              {{ formatPorts(scope.row.Port) }}
            </template>
          </el-table-column>
          <el-table-column label="备注信息" show-overflow-tooltip prop="Descp"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="进程审计" lazy>
        <div class="top">
          <el-button type="primary" style="position: absolute; right: 15px; top: 15px;"
            @click="$router.go(-1)">返回</el-button>
        </div>
        <el-table stripe border :data="ProcTableData" class="draggable-table" row-key="RuleName"
          style="width: 100%; margin-top: 47px">
          <el-table-column label="序号" width="60" type="index"
            :index='(index) => { return (index + 1) + (this.pageNum_proc - 1) * this.pageSize_proc }'> </el-table-column>
          <el-table-column label="规则名称" prop="RuleName" show-overflow-tooltip></el-table-column>
          <el-table-column label="应用对象" show-overflow-tooltip prop="DeviceObj">
            <template slot-scope="{row}">
              <span v-if="row.DeviceObj == ''">全部</span>
              <span v-if="Array.isArray(row.DeviceObj)">{{ row.DeviceObj.join(',') }}</span>
              <span v-else>{{ row.DeviceObj }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规则生效" show-overflow-tooltip prop="IsValid">
            <template slot-scope="{row}">
              <span style="color:#67C23A" v-if="row.IsValid === 1" type="success">生效</span>
              <span style="color:#F56C6C" v-else type="danger">停用</span>
            </template>
          </el-table-column>
          <el-table-column label="禁止进程" show-overflow-tooltip prop="Proc">
            <template slot-scope="scope">
              {{ formatPorts(scope.row.Proc) }}
            </template>
          </el-table-column>
          <el-table-column label="备注信息" show-overflow-tooltip prop="Descp"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import assetsInfo from "@/components/assetsInfo"
import HardDetail from "@/components/HardDetail"
import linechart from "./components/linechart.vue"
import elDragDialog from "@/directive/el-drag-dialog";
import { connrequest } from '@/api/firstPage'
import { parseTime, getuuid, recursiveGetNodePath, recursiveGetChildNodePath, formatDuration, getNowDay, bytesToSize, formatTime2, formatBytes_back } from '@/utils/index'
export default {
  directives: { elDragDialog },
  components: {
    assetsInfo, linechart, HardDetail
  },
  data() {
    let that = this
    return {
      activeTab: 'tab1',
      Moder: {},
      EnergyForm: {},
      NetTableData: [],
      pageNum_net: 1,
      pageSize_net: 10,
      BaselineForm: {
        checkitem: []
      },
      baselineTable: [],
      illTableData: [],
      pageNum_ill: 1,
      pageSize_ill: 10,
      ProcTableData: [],
      pageNum_proc: 1,
      pageSize_proc: 10,
    }
  },
  mounted() {
    this.Moder = JSON.parse(sessionStorage.getItem('detailStatus'))
    this.getEnergy(this.Moder)
    this.getBaseResult()
  },
  methods: {
    daysOfWeek(dayIndex) {
      const days = ['日', '一', '二', '三', '四', '五', '六'];
      return days[dayIndex];
    },
    async getBaseResult() {
      const resD = await connrequest("GetBaselineFixSet")
      this.baselineTable = resD.Data.BaselineResult || []
    },
    formatPorts(ports) {
      if (Array.isArray(ports)) {
        return ports.join(', ');  // 如果要在端口号之间添加空格，可以使用 "ports.join(' ')"
      } else if (typeof ports === 'string') {
        // 如果端口作为字符串存储，可以根据具体的分隔符进行拆分
        return ports.split('\n').join(', ');  // 例如，如果是用逗号分隔的字符串，则可以使用.split(',')来拆分
      } else {
        return ports; // 其他情况下，原样返回
      }
    },
    handleTabClick(tab) {
      const methodName = this.getMethodNameByTabIndex(tab.index);
      const method = this[methodName];
      if (method) {
        method(this.Moder);
      }
    },
    // 根据 tab.index 获取方法名
    getMethodNameByTabIndex(tabIndex) {
      const methodNames = [
        'getEnergy',
        'getNetWorkData',
        'getBaselineData',
        'getillegalityData',
        'getProcRuleData',
      ];

      return methodNames[tabIndex] || ''; // 注意减去1以匹配数组索引
    },
    async getEnergy(row) {
      const data = {
        Data: {
          SchoolName: row.SchoolName,
          DeviceName: row.DeviceName,
          Role: row.Role,
          DeviceClass: row.DeviceClass
        }
      }
      const res = await connrequest('GetEnergySavingRuleOfDevice', data)
      this.EnergyForm = res.Data || {}
    },
    async getNetWorkData(row) {
      const data = {
        Data: {
          SchoolName: row.SchoolName,
          DeviceName: row.DeviceName,
          Role: row.Role,
          DeviceClass: row.DeviceClass
        }
      }
      const res = await connrequest('GetNetworkServiceRuleOfDevice', data)
      this.NetTableData = res.Data || []
    },
    async getBaselineData(row) {
      const data = {
        Data: {
          SchoolName: row.SchoolName,
          DeviceName: row.DeviceName,
          Role: row.Role,
          DeviceClass: row.DeviceClass
        }
      }
      const res = await connrequest('GetBaseLineCheckOfDevice', data)
      this.BaselineForm = res.Data || {}
    },
    async getillegalityData(row) {
      const data = {
        Data: {
          SchoolName: row.SchoolName,
          DeviceName: row.DeviceName,
          Role: row.Role,
          DeviceClass: row.DeviceClass
        }
      }
      const res = await connrequest('GetListenPortRuleOfDevice', data)
      this.illTableData = res.Data || []
    },
    async getProcRuleData(row) {
      const data = {
        Data: {
          SchoolName: row.SchoolName,
          DeviceName: row.DeviceName,
          Role: row.Role,
          DeviceClass: row.DeviceClass
        }
      }
      const res = await connrequest('GetForbiddenProcRuleOfDevice', data)
      this.ProcTableData = res.Data || []
    },
  }

}
</script> 

<style>.el-descriptions-item__label.is-bordered-label {
  width: 200px;
}</style>